<template>
  <div class="app-container">
    <div class="region-info">
      当前选中地区: {{ selectedRegion || "江苏省" }}
    </div>

    <!-- 返回上级按钮 - 仅在有上级地图时显示 -->
    <button
      v-if="levelHistory.length > 0"
      @click="handleDrillUp"
      class="back-button"
    >
      返回上级
    </button>

    <div class="map-container">
      <MapComponent
        :onRegionClick="handleRegionClick"
        :mapLevels="mapLevels"
        :currentLevel="currentLevel"
        :levelHistory="levelHistory"
        :onDrillDown="handleDrillDown"
      />
    </div>
  </div>
</template>

<script setup>
import { applyPureReactInVue } from "veaury";
import Map from "@/react_app/Map/App.jsx";
import { ref } from "vue";
// 导入必要的数据
import countValues_anhui from "@/react_app/assets/values_anhui.json";
import geoJson_jiangsu from "@/react_app/assets/citysJson/jiangsu/江苏省.json";
import geoJson_nanjing from "@/react_app/assets/citysJson/jiangsu/南京市.json";
import geoJson_huaian from "@/react_app/assets/citysJson/jiangsu/淮安市.json";

const selectedRegion = ref(null);
const currentLevel = ref("jiangsu"); // 默认显示江苏省地图
const levelHistory = ref([]); // 保存下钻历史

// 定义地图层级数据
const mapLevels = {
  jiangsu: {
    geoJson: geoJson_jiangsu,
    countValues: countValues_anhui,
    center: [118.767413, 32.041544],
    baseHeight: 0.2,
    midHeightScale: 4,
    topHeightScale: 0.01,
    parentLevel: null,
    name: "江苏省",
    distanceFactor: 9, // 省级地图文本缩放因子
    textYOffset: -0.4, // 文本Y轴偏移量
    gsapCamera: {
      x: 0,
      y: 0.9,
      z: 0.3,
    },
  },
  nanjing: {
    geoJson: geoJson_nanjing,
    countValues: countValues_anhui,
    center: [118.802422, 32.064653],
    baseHeight: 0.15,
    midHeightScale: 1.5,
    topHeightScale: 0.015,
    parentLevel: "jiangsu",
    name: "南京市",
    distanceFactor: 2.5,
    textYOffset: -0.18, // 文本Y轴偏移量
    gsapCamera: {
      x: 0,
      y: 0.9,
      z: 0.3,
    },
  },
  huaian: {
    geoJson: geoJson_huaian,
    countValues: countValues_anhui,
    center: [119.296558, 33.497502],
    baseHeight: 0.15,
    midHeightScale: 1.5,
    topHeightScale: 0.015,
    parentLevel: "jiangsu",
    name: "淮安市",
    distanceFactor: 2.5,
    textYOffset: -0.18, // 文本Y轴偏移量
    gsapCamera: {
      x: 0,
      y: 0.9,
      z: 0.3,
    },
  },
};

// 处理区域单击 - 发送区域名称用于展示
const handleRegionClick = (regionName) => {
  selectedRegion.value = regionName;
  console.log("选中的地区:", regionName);
};

// 处理地图区域点击 - 执行下钻
const handleDrillDown = (regionName) => {
  // 查找是否有对应的下一级地图
  const nextLevel = Object.keys(mapLevels).find(
    (key) => mapLevels[key].name === regionName
  );

  if (nextLevel) {
    // 保存当前层级到历史
    levelHistory.value = [...levelHistory.value, currentLevel.value];
    // 切换到下一级地图
    currentLevel.value = nextLevel;
  }
};

// 返回上一级地图
const handleDrillUp = () => {
  if (levelHistory.value.length > 0) {
    // 从历史记录中获取上一级
    const prevLevel = levelHistory.value[levelHistory.value.length - 1];
    // 更新历史记录
    levelHistory.value = levelHistory.value.slice(0, -1);
    // 切换到上一级地图
    currentLevel.value = prevLevel;
  }
};

const MapComponent = applyPureReactInVue(Map);
</script>

<style lang="scss" scoped>
.app-container {
  width: 800px;
  height: 900px;
  overflow: hidden;
  background-color: #fff;
  margin: 0 auto;
  overflow: hidden;
  border: 1px solid #000;
  position: relative;
  box-sizing: border-box;

  display: flex;
  flex-direction: column;
  justify-content: space-between;
  align-items: center;
}

.region-info {
  width: 100%;
  background-color: #f0f0f0;
  padding: 10px;
  box-sizing: border-box;
  margin-bottom: 10px;
  border-radius: 4px;
  font-weight: bold;
}

.back-button {
  position: absolute;
  top: 60px;
  left: 20px;
  z-index: 100;
  padding: 8px 16px;
  background-color: #3498db;
  color: white;
  border: none;
  border-radius: 4px;
  cursor: pointer;
}

.map-container {
  width: 100%;
  height: calc(100% - 50px);
}
</style>
